<template>
  <span style="display: inline-block; color: var(--color-level-1)" :class="[
      'tr-filter-item',
      !!IsOuter ? 'filter-item-outer' : '',
      !!FilterIsEasy ? 'filter-item-outer-easy' : '',
      !!FilterIsClassic ? 'filter-item-outer-classic' : '',
      isMobile ? 'filter-item-outer-mobile' : 'filter-item-outer-pc',
      Filter.IsOff ? 'filter-item-off' : '',
    ]" tabIndex="-1">
    <span v-if="Filter.Type == 'Filter' && (ItemIndex >= 0 || !!IsOuter)" @visible-change="relationvisiblechange">
      <span v-show="!FilterIsEasy" @mouseover="mouseOver" @mouseout="mouseOut" :class="[
          'filter-relation',
          Filter.IsOff ? 'filter-item-off' : '',
          Filter.Relation == 'or'
            ? 'filter-relation-or'
            : 'filter-relation-and',
        ]" :tabIndex="tabIndex">{{
        ItemIndex == 0
        ? IsOuter
        ? Term.Relation.while
        : '⋮'
        : Filter.Relation == 'and'
        ? Term.Relation.and
        : Term.Relation.or
        }}<div :id="operID" class="adj-oper-panel" v-if="
            Filter.Type == 'Filter' && (Group.Children.length >= 1 || !!IsOuter)
          ">
          <div class="adj-oper-item" v-if="ItemIndex > 0" :title="
              Filter.Relation == 'and'
                ? `${Term.title.switch} “' ${filterName}  '” ${Term.title.to} “${Term.Relation.or}”`
                : `${Term.title.switch} “'  ${filterName}  '” ${Term.title.to} “${Term.Relation.and}”`
            " @click="fasterRelationClick" :tabIndex="tabIndex">
            {{
            Filter.Relation == 'and' ? Term.Relation.or : Term.Relation.and
            }}
          </div>
          <div class="adj-oper-item" :title="
              Filter.IsOff
                ? `${Term.title.enable} ${Term.title.condition} “' ${filterName} '”`
                : `${Term.title.disable} ${Term.title.condition} “' ${filterName} '”`
            " @click="fasterSwitchClick" :tabIndex="tabIndex">
            <svg class="svg-icon" viewBox="-7 -4 50 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path :d="
                  Group.IsOff
                    ? 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23ZM9.14,10.59A5.41,5.41,0,1,0,14.55,16,5.41,5.41,0,0,0,9.14,10.59Zm0,9A3.56,3.56,0,1,1,12.69,16,3.56,3.56,0,0,1,9.14,19.56Z'
                    : 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23Zm-.34-12.45A5.41,5.41,0,1,0,28.27,16,5.42,5.42,0,0,0,22.86,10.59Zm0,9A3.56,3.56,0,1,1,26.42,16,3.56,3.56,0,0,1,22.86,19.56Z'
                " transform="translate(0 -7.2)"></path>
            </svg>
          </div>
          <div class="adj-oper-item" :title="`${Term.title.delete} ${Term.title.condition} “' ${filterName} '”`"
            @click="fasterDeleteClick" :tabIndex="tabIndex">
            <q-icon name="clear" size="14px"></q-icon>
          </div>
        </div>
      </span>

      <q-menu transition-show="jump-down" transition-hide="jump-up" v-model="visibleOperateMoreMenu">
        <div class="tr-filter-menu no-wrap q-pa-md">
          <div class="operateMore">
            <div class="m-list" ref="operateMoreList" style="min-width: 90px">
              <div class="item" :class="{
                  'z-on': Filter.Relation == 'and',
                }" style="padding: 0" clickable @click="relationCommand('and')" @keyup.enter="relationCommand('and')"
                :tabIndex="tabIndex">
                <div class="tr-filter-menu-item" :class="{
                    'z-disabled': Filter.IsOff || parentIsOff,
                  }" :title="`${Term.title.switch} ${Term.title.to} ${Term.Relation.and1}`">
                  <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M778.784 594.88l54.88 58.24c-39.552 35.104-71.296 61.984-95.168 80.64 43.296 43.296 94.08 96.32 152.32 159.04h-112l-103.04-107.52c-67.2 50.784-121.728 84.736-163.52 101.92-41.824 17.184-87.36 25.76-136.64 25.76-60.48 0-109.952-17.728-148.416-53.216C188.736 824.32 169.536 780.8 169.536 729.28c0-51.52 17.152-98.752 51.52-141.664 34.336-42.944 81.728-87.936 142.208-134.976-41.792-48.544-69.6-86.08-83.424-112.576C266.016 313.6 259.136 288 259.136 263.36c0-42.56 17.152-77.44 51.52-104.736 34.336-27.232 77.44-40.864 129.344-40.864 51.904 0 94.272 14.56 127.136 43.68 32.832 29.12 49.28 63.104 49.28 101.92 0 27.616-9.536 56.736-28.576 87.36-19.04 30.624-56.544 69.44-112.576 116.48l206.08 211.68a3104.32 3104.32 0 0 0 97.44-84z m-352.768-188.16c72.416-57.504 108.608-105.28 108.608-143.36 0-18.656-9.12-34.88-27.424-48.736-18.304-13.792-41.44-20.704-69.44-20.704s-51.328 6.72-70.016 20.16c-18.656 13.44-28 30.976-28 52.64 0 29.856 28.768 76.544 86.24 140z m-10.112 107.52c-69.44 52.256-114.4 93.504-134.944 123.744-20.544 30.272-30.816 59.36-30.816 87.36 0 28.032 13.088 53.76 39.232 77.28 26.112 23.552 56.352 35.296 90.688 35.296 34.368 0 69.088-8 104.16-24.064 35.104-16.064 80.64-44.256 136.64-84.576l-204.96-215.04z">
                    </path>
                  </svg>
                  <span style="">{{ Term.Relation.and1 }}</span>
                </div>
              </div>

              <div class="item" :class="{
                  'z-on': Filter.Relation == 'or',
                }" style="padding: 0" clickable @click="relationCommand('or')" @keyup.enter="relationCommand('or')"
                :tabIndex="tabIndex">
                <div class="tr-filter-menu-item" :class="{
                    'z-disabled': Filter.IsOff || parentIsOff,
                  }" :title="`${Term.title.switch} ${Term.title.to} ${Term.Relation.or1}`">
                  <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path d="M445.12 98.16v828.85h-63.79V98.16zM636.89 98.15V927H573.1V98.15z"></path>
                  </svg>
                  <span style="">{{ Term.Relation.or1 }}</span>
                </div>
              </div>

              <t-separator style="margin: 10px 0" @mouseenter="hideLayoutMenu"></t-separator>

              <div class="item" style="padding: 0" clickable @click="relationCommand('off')"
                @keyup.enter="relationCommand('off')" :tabIndex="tabIndex">
                <div class="tr-filter-menu-item" :title="Filter.IsOff ? Term.title.enable : Term.title.disable">
                  <svg class="svg-icon" viewBox="0 -2 40 28" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path :d="
                        Filter.IsOff
                          ? 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23ZM9.14,10.59A5.41,5.41,0,1,0,14.55,16,5.41,5.41,0,0,0,9.14,10.59Zm0,9A3.56,3.56,0,1,1,12.69,16,3.56,3.56,0,0,1,9.14,19.56Z'
                          : 'M23.2,7.2H8.8a8.8,8.8,0,1,0,0,17.6H23.2a8.8,8.8,0,1,0,0-17.6ZM23.2,23H8.8A7,7,0,0,1,8.8,9H23.2A7,7,0,1,1,23.2,23Zm-.34-12.45A5.41,5.41,0,1,0,28.27,16,5.42,5.42,0,0,0,22.86,10.59Zm0,9A3.56,3.56,0,1,1,26.42,16,3.56,3.56,0,0,1,22.86,19.56Z'
                      " transform="translate(0 -7.2)" />
                  </svg>
                  <span style="">{{
                    Filter.IsOff ? Term.title.enable : Term.title.disable
                    }}</span>
                </div>
              </div>

              <div class="item" style="padding: 0" clickable @click="fasterDeleteClick" @keyup.enter="fasterDeleteClick"
                @keydown.tab="$refs.operateMoreList.focus" :tabIndex="tabIndex">
                <div class="tr-filter-menu-item" :title="Term.title.delete">
                  <q-icon name="clear" size="14px"></q-icon>
                  <span style="">
                    {{ Term.title.delete }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-menu>
    </span>

    <span :id="keyID" v-if="Filter.Type == 'Filter'" :class="{
        'display-inline-block': !FilterIsClassic,
        'filter-item-panel-classic': !!FilterIsClassic,
      }">
      <!-- 筛选字段名称 -->
      <span :class="[
          !!FilterIsEasy ? 'filter-item-drag-handle' : '',
          !!FilterIsClassic ? 'el-col el-col-8 filter-name-panel-classic' : '',
          !!FilterIsClassic &&
          filterField.hasOwnProperty('filter_isShowCondition') &&
          !filterField.filter_isShowCondition
            ? 'filter-name-panel-classic-border'
            : '',
        ]" size="medium" placement="" :trigger="!FilterIsClassic ? 'click' : null" :readonly="isMobile"
        ref="filterNameDropDown">
        <span :data-is-must="filterField.filter_isMust"
          :class="FilterIsClassic ? 'filter-name-box-classic' : 'filter-name'"
          :style="enableHelpTip&&FilterIsClassic?`display: flex;justify-content: start;`:''">
          <!-- 筛选名称显示框 -->
          <input v-if="!FilterIsClassic||!enableHelpTip" :id="'filterName_' + Filter.ID" type="text" v-model="filterName"
            :title="filterName" :data-is-must="filterField.filter_isMust" placeholder="" ref="filterNameInput"
            :tabIndex="FilterIsClassic ? '-1' : tabIndex" @keyup.enter="filterNameClick" @click="filterNameClick"
            @keyup.down="$refs?.fieldDownList?.focusAndActive" @blur="filterNameBlur" :class="[
              !!FilterIsClassic
                ? 'el-col el-col-8 filter-name-input-classic'
                : 'filter-name',
            ]" :readonly="!FilterIsClassic ? false : 'readonly'" v-autowidth="{
              maxWidth: !!FilterIsClassic ? '100%' : '200px',
              minWidth: !!FilterIsClassic ? '100%' : '30px',
              comfortZone: '1px',
            }" />
          <span v-else-if="FilterIsClassic" :id="'filterName_' + Filter.ID"  :title="filterName" class="filter-name-input-classic" :style="`
              display: inline-block;
              overflow: hidden;
             ${enableHelpTip?'max-width: calc(100% - 28px)':'max-width: calc(100% - 10px)'} ;
              white-space: nowrap;
          `">
            {{ filterName }}
          </span>
          <THelp style="flex: none;text-indent: 0;margin-left: 4px;" v-if="enableHelpTip&&FilterIsClassic" class='t-quick-filter-help' :hideLabel="true"
            :content="helpTipContext" :helpPlacement="helpTipPlacement" linkType='open'></THelp>
        </span>

        <!-- 筛选名称下拉选择框 -->
        <q-menu transition-show="jump-down" transition-hide="jump-up" :offset="FilterIsClassic ? [0, 1] : [0, 5]"
          no-parent-event no-focus v-model="visibleFilterNameMenu" v-if="!Filter.IsOff && !FilterIsClassic">
          <div class="tr-filter-menu">
            <!-- 筛选字段搜索 -->
            <div class="filter-name-text-panel" v-if="!isMobile">
              <span class="filter-name-search-panel">
                <!-- 筛选字段搜索图标 -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="svg-icon">
                  <path
                    d="M12.57.06A12.57,12.57,0,1,0,25.14,12.63,12.57,12.57,0,0,0,12.57.06Zm0,22.64A10.07,10.07,0,1,1,22.64,12.62h0A10.08,10.08,0,0,1,12.57,22.7ZM31.15,27l-4.59-4.58a2.91,2.91,0,0,0-4.12,4.11L27,31.09A2.91,2.91,0,1,0,31.15,27Z"
                    transform="translate(0 -0.06)"></path>
                </svg>
              </span>

              <!-- 筛选字段搜索输入框 -->
              <input class="filter-name-text" ref="fieldSearchInput" type="text" v-model="searchText"
                @blur="searchTextBlur" :placeholder="Term.placeHolder.placeholder_searchText"
                @keydown="filterNameKeyDown" @keyup.down="$refs.fieldDownList.focusAndActive" :tabIndex="tabIndex" />
            </div>

            <!-- 字段搜索内容 -->
            <q-scroll-area ref="FieldsScroll" class="row scroll" :style="{ height: scrollHeight + 'px' }">
              <down-list ref="fieldDownList" FieldKey="fieldName" :List="activeItemList" :CurrentIndex="
                  activeItemList.findIndex(v => v.fieldName == Filter.Name)
                " @select="filterNameCommand" :mountedToFocus="false" :tabIndex="tabIndex"></down-list>
            </q-scroll-area>

            <div
              style="min-width: 100px; max-width: 100%; height: 0px; overflow: hidden; visibility: hidden; padding-right: 60px;">
              <div v-for="({ fieldName }) in activeItemList">{{ fieldName }}</div>
            </div>
            <!-- 字段搜索为空提示 -->
            <div v-if="activeItemList.length == 0" class="filter-name-empty-panel">
              <span class="filter-name-empty">{{
                Term.placeHolder.noData
                }}</span>
            </div>
          </div>
        </q-menu>
      </span>

      <!-- 筛选运算符 -->
      <span v-show="
          !FilterIsClassic ||
          (!!FilterIsClassic &&
            (!filterField.hasOwnProperty('filter_isShowCondition') ||
              !!filterField.filter_isShowCondition))
        " :class="[
          !!FilterIsClassic
            ? 'el-col el-col-4 filter-condition-panel-classic'
            : 's-focused',
        ]" size="medium" placement="" trigger="click" :tabIndex="tabIndex"
        :disabled="!Filter.IsOff || !!filterField.field_condition">
        <span :class="[
            !!FilterIsClassic ? 'filter-condition-classic' : 'filter-condition',
          ]" ref="filter_condition" :title="Term.placeHolder.clickChange">{{ conditionText }}</span>

        <!-- 条件字段下拉 -->
        <q-menu transition-show="jump-down" transition-hide="jump-up" anchor="bottom middle" self="top middle"
          :offset="FilterIsClassic ? [0, 1] : [0, 5]" :target="true" v-model="visibleFilterConditionMenu">
          <div class="tr-filter-menu">
            <div style="min-width: 100px; max-width: 100%; height: 0px"></div>
            <q-scroll-area ref="FieldsScroll" class="scroll" :style="{
                height: Math.min(conditionList.length * 33, 300) + 'px',
              }">
              <down-list ref="conditionDownList" FieldKey="Name" :List="conditionList" :CurrentIndex="
                  activeItemList.findIndex(
                    v =>
                      v.Code == Filter.Condition ||
                      v.Text == Filter.Condition ||
                      v.Name == Filter.Condition,
                  )
                " @select="conditionCommand">
                <template #item="{ item, index }">
                  <div style="
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      line-height: 32px;
                    ">
                    <svg class="svg-icon" style="width: 25%" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg">
                      <path :d="item.Path"></path>
                    </svg>
                    <span style="width: 75%; margin-left: 14px">{{
                      item.Name
                      }}</span>
                  </div>
                </template>
              </down-list>
            </q-scroll-area>

            <div
              style="min-width: 100px; max-width: 100%; height: 0px; overflow: hidden; visibility: hidden; padding-right: 60px;">
              <div v-for="({ Name }) in conditionList">{{ Name }}</div>
            </div>
          </div>
        </q-menu>
      </span>

      <!-- 筛选值 -->
      <FilterValue ref="filterValue" :class="[
          !!FilterIsClassic
            ? !filterField.hasOwnProperty('filter_isShowCondition') ||
              !!filterField.filter_isShowCondition
              ? 'el-col el-col-12'
              : 'el-col el-col-16'
            : '',
        ]" :Filter.sync="Filter" :Fields="Fields" :Mappings="Mappings" :disabled="Filter.IsOff"
        :FilterIsEasy="FilterIsEasy" :FilterIsClassic="FilterIsClassic" :tabIndex="tabIndex" v-show="filterValueShow">
      </FilterValue>

      <span v-if="FilterIsEasy && !FilterIsClassic" class="filter-item-oper-delete" @click="relationCommand('del')"
        @keyup.enter="relationCommand('del')" :title="Term.title.deleteConditions" :tabindex="tabIndex">
        <q-icon name="close" size="12px"></q-icon>
      </span>
      <span v-if="!!FilterIsClassic" class="filter-item-oper-resize" @mousedown="filterLayoutDown"
        @mouseup="filterLayoutUp" @mousemove="filterLayoutMove"></span>
    </span>

    <FilterGroup v-if="Filter.Type == 'Group'" :Group.sync="Filter"
      @focusFilterDivDelayed="$emit('focusFilterDivDelayed')"
      @update:Group="value => $emit('update:Filter', { ItemIndex, value })" :Groups="Groups"
      @update:Groups="value => $emit('update:Groups', value)" :GroupIndex="100" :ItemIndex="ItemIndex" :Fields="Fields"
      :Mappings="Mappings" :Conditions="Conditions" :FilterIsEasy="FilterIsEasy" :FilterIsClassic="FilterIsClassic"
      :tabIndex="tabIndex">
    </FilterGroup>
  </span>
</template>

<script>
import _ from 'lodash';
import VueInputAutowidth from './directive/auto-width';
import { defineAsyncComponent } from 'vue';

import { Terms } from './config/resouce';
import { MixinsStateFocusedAutoOpen } from './mixins/mixinsStateFocusedAutoOpen';
import { useQuasar } from '@teld/q-components';

import QScrollArea from '@teld/q-components/ScrollArea';
import QMenu from '@teld/q-components/Menu';
import QIcon from '@teld/q-components/Icon';
import THelp from 't/basic/help';
import TSeparator from 't/basic/separator/Component';
import TList from 't/basic/list';
import TItem from 't/basic/item';

import FilterValue from './FilterValue';
import downList from './cpts/down-list';

const Funcs = window.Funcs || {
  Notify: () => {},
  GetTerms: () => {},
  AtVarTransform: () => {},
  FasRequestTagAdd: () => {},
  Confirm: () => {},
  DateTimeToString: () => {},
  DateToString: () => {},
};

export default {
  name: 'FilterItem',
  directives: { autowidth: VueInputAutowidth },
  components: {
    FilterGroup: defineAsyncComponent(() => import('./FilterGroup')),
    FilterValue,

    QScrollArea,
    QMenu,
    QIcon,

    TList,
    TItem,
    TSeparator,

    downList,
    THelp
  },
  props: [
    'IsOuter',
    'Groups',
    'Group',
    'Filter',
    'ItemIndex',
    'Fields',
    'Mappings',
    'Conditions',
    'FilterIsEasy',
    'FilterIsClassic',
    'InitValueScript',
    'tabIndex',
    "enableHelpTip",
    "helpTipPlacement",
    "helpTipContext",
  ],

  mixins: [MixinsStateFocusedAutoOpen],

  data() {
    return {
      Term: Terms,
      timeoutActiveName: null,
      timeoutBlurName: null,
      currFilter: _.cloneDeep(this.Filter),
      filterFields: (() => {
        let _fields = _.cloneDeep(this.Fields);
        _fields.forEach(item => {
          //添加下拉项是否显示属性
          item['isActive'] = true;
        });
        return _fields;
      })(),
      filterName: this.Filter.Name,
      searchText: '',
      //条件名称是否选择模式
      selectFlag: true,
      //条件名称是否已经回车确定
      selectEnter: false,
      tempInfo: null,
      //拖动布局变量
      filterLayoutX: null,
      //拖动布局变更计时器
      timeoutLayoutChange: null,
      // 显示字段名称下拉选择
      visibleFilterNameMenu: false,
      // 显示字段条件下拉选择
      visibleFilterConditionMenu: false,

      // 显示操作菜单
      visibleOperateMoreMenu: false,
    };
  },

  computed: {
    filterField() {
      //查找当前条件对应的字段信息
      let _fields = this.Fields.filter(item => {
        return (
          item.tableAlias +
            '.' +
            (item.tableAlias != '__UserDefineColumns'
              ? item.fieldCode
              : item.fieldAlias) ==
          this.Filter.Code
        );
      });

      return _fields[0] || {};
    },
    keyID() {
      return 'key_' + this.Filter.ID;
    },
    operID() {
      return 'oper_' + this.Filter.ID;
    },
    parentIsOff() {
      this.tempInfo = {};
      this.getParentInfo(this.Groups, null);
      return !!this.tempInfo.parent ? this.tempInfo.parent.IsOff : false;
    },
    activeItemList() {
      return this.filterFields.filter(item => item.isActive);
    },
    conditionList() {
      if (this.filterField.filter_inputWay == 'treehelp') {
        let codeList = [
          '=',
          '<>',
          'isblank',
          'isnotblank',
          'in',
          'notin',
          '[=]',
          '[<>]',
        ];
        if (this.filterField.filter_dataValue) {
          let filter_dataValue = JSON.parse(this.filterField.filter_dataValue);
          if (filter_dataValue.multiple) {
            codeList = ['in', 'notin', 'isblank', 'isnotblank', '[=]', '[<>]'];
          }
          if (filter_dataValue.type == 2 && filter_dataValue.isLazy) {
            codeList = codeList.filter(item => item != '<>' && item != 'notin');
          }
          //isLazy
          //multiple
          //type==2
          this.filterField.filter_dataValue;
        }
        return this.Conditions[
          this.Mappings[this.Filter.DataType] || 'string'
        ].filter(item => codeList.includes(item.Code));
      }
      // if (!!this.FilterIsClassic)
      // {
      //   return this.Conditions[this.Mappings[this.Filter.DataType] || "string"].filter(item => item.Code.indexOf("[") == -1);
      // }
      // else
      // {
      //   return this.Conditions[this.Mappings[this.Filter.DataType] || "string"];
      // }
      let _condition =
        this.Conditions[this.Mappings[this.Filter.DataType] || 'string'];

      if (
        !!this.filterField.field_condition &&
        _.trim(this.filterField.field_condition) != ''
      ) {
        //兼容历史数据，条件关系历史数据可能为汉字
        let _list = [
          { Name: '等于', Code: '=' },
          { Name: '大于', Code: '>' },
          { Name: '大于等于', Code: '>=' },
          { Name: '小于', Code: '<' },
          { Name: '小于等于', Code: '<=' },
          { Name: '不等于', Code: '<>' },
          { Name: '包含', Code: 'contains' },
          { Name: '不包含', Code: 'notcontains' },
          { Name: '开始于', Code: 'startswith' },
          { Name: '结束于', Code: 'endswith' },
          { Name: '隶属', Code: 'i' },
          { Name: '非隶属', Code: 'notin' },
        ];
        let _his = _list.filter(
          item => item.Name == this.filterField.field_condition,
        );
        _his = _his[0] || {};

        return _condition.filter(
          item =>
            item.Code ==
            (!!_his.Code ? _his.Code : this.filterField.field_condition),
        );
      } else {
        return _condition;
      }
    },
    conditionText() {
      // if (!!this.filterField.field_condition)
      // {
      //   return _.trim(this.filterField.field_condition);
      // }

      let _condition = this.Filter.Condition || '=';
      if (
        this.conditionList &&
        this.conditionList.length != 0 &&
        !this.conditionList.some(item => item.Code == _condition)
      ) {
        _condition = this.conditionList.filter(
          item => !['isblank', 'isnotblank'].includes(item.Code),
        )[0].Code;
        this.Filter.Condition = _condition;
      }

      //兼容历史数据，条件关系历史数据可能为汉字
      if (!!this.filterField.field_condition) {
        let _list = [
          { Name: '等于', Code: '=' },
          { Name: '大于', Code: '>' },
          { Name: '大于等于', Code: '>=' },
          { Name: '小于', Code: '<' },
          { Name: '小于等于', Code: '<=' },
          { Name: '不等于', Code: '<>' },
          { Name: '包含', Code: 'contains' },
          { Name: '不包含', Code: 'notcontains' },
          { Name: '开始于', Code: 'startswith' },
          { Name: '结束于', Code: 'endswith' },
          { Name: '隶属', Code: 'i' },
          { Name: '非隶属', Code: 'notin' },
        ];
        let _his = _list.filter(
          item => item.Name == this.filterField.field_condition,
        );

        _his = _his[0] || {};

        _condition = !!_his.Code ? _his.Code : this.filterField.field_condition;
      }

      let _conds = this.Conditions[
        this.Mappings[this.Filter.DataType] || 'string'
      ].filter(item => {
        return (
          item.Code == _condition ||
          item.Name == _condition ||
          item.Text == _condition
        );
      });

      //兼容字段类型与固定条件关系不符的情况
      if (_conds.length == 0) {
        //换个类型匹配下，偷个懒，应该没有问题
        _conds = this.Conditions['datetime'].filter(item => {
          return (
            item.Code == _condition ||
            item.Name == _condition ||
            item.Text == _condition
          );
        });
      }

      return _conds.length == 0 ? Terms.title.notMapped : _conds[0].Sign;
    },
    filterValueShow() {
      let _hides = [
        'isblank',
        Terms.operate.isblank,
        'isnotblank',
        Terms.operate.isnotblank,
      ];
      return !_hides.includes(this.Filter.Condition);
    },
    isFieldCond() {
      return (
        this.Filter.Condition.indexOf('[') != -1 &&
        this.Filter.Condition.indexOf(']') != -1
      );
    },
    scrollHeight() {
      let _height = Math.min(12, this.activeItemList.length) * 33;

      return _height;
    },
    isMobile() {
      return window.TFF?.common?.cts?.isMobile();
    },
  },

  watch: {
    Filter: {
      handler(newValue, oldValue) {
        this.filterName = newValue.Name;
      },
      deep: true,
    },
    currFilter(newValue, oldValue) {},
    //筛选条件名称输入发生变化，下拉项根据输入进行过滤
    filterName(newValue, oldValue) {
      //字段下拉不显示时，已经回车确定后 不做处理
      if (!this.visibleFilterNameMenu || this.selectEnter) {
        return;
      }

      if (newValue == oldValue) return;

      // //输入无匹配项时，显示全部下拉项
      // if (this.filterFields.filter(item => item.fieldName.indexOf(_.trim(newValue)) != -1).length == 0)
      // {
      //   this.filterFields.forEach(item =>
      //   {
      //     item["isActive"] = true;
      //   });
      //   return;
      // }

      //下拉项根据输入进行过滤
      this.filterFields.forEach(item => {
        if (item.fieldName.indexOf(_.trim(newValue)) == -1) {
          item['isActive'] = false;
        } else {
          item['isActive'] = true;
        }
      });

      //选择模式
      this.selectFlag = false;
      //触发激活
      // this.$refs['filterNameInput'].click();
    },
    searchText(newValue, oldValue) {
      //字段下拉不显示时不做处理
      if (!this.visibleFilterNameMenu) return;
      if (newValue == oldValue) return;

      // //输入无匹配项时，显示全部下拉项
      // if (this.filterFields.filter(item => item.fieldName.indexOf(_.trim(newValue)) != -1).length == 0)
      // {
      //   this.filterFields.forEach(item =>
      //   {
      //     item["isActive"] = true;
      //   });
      //   return;
      // }

      //下拉项根据输入进行过滤
      this.filterFields.forEach(item => {
        if (item.fieldName.indexOf(_.trim(newValue)) == -1) {
          item['isActive'] = false;
        } else {
          item['isActive'] = true;
        }
      });
      this.$nextTick(() => {
        // console.log('==========searchText', newValue, this.filterFields);
        // console.log('==========searchText', newValue, this.activeItemList);
        // console.log('==========searchText', newValue, this.scrollHeight);
      });

      // this.$refs['filterNameDropDown'].removeTabindex();
      // this.$refs['filterNameDropDown'].initDomOperation();
    },
    visibleFilterConditionMenu(val) {
      // console.log('=============visibleFilterConditionMenu', val);
    },
    visibleFilterNameMenu(val) {
      console.log('=============visibleFilterNameMenu', val);
    },
  },

  setup() {
    const { dialog } = useQuasar();
    return {
      notify({ message = '', type = 'info', caption = '' }) {
        Funcs.Notify(caption, message, type);
      },
      dialog,
    };
  },

  mounted() {
    // this.registerTabEvent(this.$refs.filter_condition);
  },

  methods: {
    relationCommand(command) {
      switch (command) {
        case 'and':
          this.Filter.Relation = 'and';
          break;
        case 'or':
          this.Filter.Relation = 'or';
          break;
        case 'off':
          this.Filter.IsOff = !this.Filter.IsOff;
          break;
        case 'del':
          this.tempInfo = {};
          this.getParentInfo(this.Groups, null);
          (!!this.tempInfo.parent
            ? this.tempInfo.parent.Children
            : this.Groups
          ).splice(this.tempInfo.index, 1);
          //如果父级内部只有一项，且项是组，拿出去
          if (
            !!this.tempInfo.parent &&
            this.tempInfo.parent.Children.length == 1 &&
            this.tempInfo.parent.Children[0].Type == 'Group'
          ) {
            this.tempInfo.parent.Children =
              this.tempInfo.parent.Children[0].Children;
          }

          this.$emit('focusFilterDivDelayed');
          break;
        default:
          break;
      }

      this.visibleOperateMoreMenu = false;
    },
    conditionCommand(condition) {
      this.visibleFilterConditionMenu = false;
      //模型是否发生变化，没有变化，不再更新值，1、字段对比变化；2、区间对比变化；3、为空对比变化；4、原值没有变动算作变化
      let _modelIsChange =
        !(
          _.startsWith(condition.Code, '[') ==
          _.startsWith(this.Filter.Condition, '[')
        ) ||
        !(
          _.endsWith(condition.Code, 'between') ==
          _.endsWith(this.Filter.Condition, 'between')
        ) ||
        !(
          _.endsWith(condition.Code, 'blank') ==
          _.endsWith(this.Filter.Condition, 'blank')
        ) ||
        _.startsWith(this.Filter.Value, '<');

      this.Filter.Condition = condition.Code;

      //字段比较
      if (this.isFieldCond) {
        this.Filter.ValueType = 1;
        if (_modelIsChange) {
          if (!this.FilterIsClassic) {
            this.Filter.Value = `<${Terms.field.choiseField}>`;
            this.Filter.ValueName = `<${Terms.field.choiseField}>`;
          } else {
            this.Filter.Value = '';
            this.Filter.ValueName = '';
            this.$refs.filterValue
              ? this.$refs.filterValue.clearFilterValue()
              : '';
          }
        }
      } else {
        this.Filter.ValueType = 0;
        if (_modelIsChange) {
          if (!this.FilterIsClassic) {
            this.Filter.Value = `<${Terms.field.inputValue}>`;
          } else {
            this.Filter.Value = '';
            this.Filter.ValueName = '';
            this.$refs.filterValue
              ? this.$refs.filterValue.clearFilterValue()
              : '';
          }
        }
      }

      if (['isblank', 'isnotblank'].includes(condition.Code)) {
        this.Filter.Value = null;
        this.Filter.ValueName = null;
        this.$refs.filterValue ? this.$refs.filterValue.clearFilterValue() : '';
        return;
      }

      if (_modelIsChange) {
        //变更筛选条件，条件值
        this.filterChangeTimer(this.Filter);
      }
    },
    filterNameCommand(field) {
      this.visibleFilterNameMenu = false;
      if (field.fieldName == this.Filter.Name) {
        return false;
      }

      //页面缓存，新增默认这个
      window['filter_select_field'] = field;
      let _this = this;

      //字段间对比，字段变动
      if (this.Filter.ValueType == '1') {
        this.Filter.DataType = field.dataType;
        this.Filter.Code =
          field.tableAlias +
          '.' +
          (field.tableAlias != '__UserDefineColumns'
            ? field.fieldCode
            : field.fieldAlias);
        this.Filter.Name = field.fieldName;
        this.Filter.ValueType = 1;

        this.filterName = this.Filter.Name;
        this.currFilter = _.cloneDeep(this.Filter);
        this.selectFlag = true;

        //原来值字段没有选择
        if (this.Filter.ValueName == `<${Terms.field.choiseField}>`) {
          //变更筛选条件，条件值
          this.filterChangeTimer(this.Filter, true);
          return false;
        }

        //新字段类型与值字段类型不匹配，重新选择
        let _valueField = this.Fields.filter(item => {
          return (
            item.tableAlias +
              '.' +
              (item.tableAlias != '__UserDefineColumns'
                ? item.fieldCode
                : item.fieldAlias) ==
            _this.Filter.ValueName
          );
        });
        _valueField = _valueField.length > 0 ? _valueField[0] : {};

        if (
          this.Mappings[this.Filter.DataType] !=
          this.Mappings[_valueField.dataType]
        ) {
          this.Filter.Value = `<${Terms.field.choiseField}>`;
          this.Filter.ValueName = `<${Terms.field.choiseField}>`;

          //变更筛选条件，条件值
          this.filterChangeTimer(this.Filter, true);
          return false;
        }
      }

      //原字段信息
      let _oldField = this.Fields.filter(item => {
        return (
          item.tableAlias +
            '.' +
            (item.tableAlias != '__UserDefineColumns'
              ? item.fieldCode
              : item.fieldAlias) ==
            _this.Filter.Code && item.fieldName == _this.Filter.Name
        );
      });
      _oldField = _oldField.length > 0 ? _oldField[0] : {};

      this.Filter.DataType = field.dataType;
      this.Filter.Code =
        field.tableAlias +
        '.' +
        (field.tableAlias != '__UserDefineColumns'
          ? field.fieldCode
          : field.fieldAlias);
      this.Filter.Name = field.fieldName;
      this.Filter.ValueType = 0;

      this.filterName = this.Filter.Name;
      this.currFilter = _.cloneDeep(this.Filter);
      this.selectFlag = true;

      //模型是否发生变化，1、字段类型变化；2、类型没变，选值变化；
      let _modelIsChange =
        field.dataType != _oldField.dataType ||
        field.field_condition != _oldField.field_condition ||
        (field.dataType == _oldField.dataType &&
          field.filter_dataValue != _oldField.filter_dataValue);
      //模型没有发生变化，值、关系都不变
      if (!_modelIsChange) {
        return false;
      }

      let _initValue = {};
      let _config = {
        ColNum: 6,
        IsCommUse: true,
        InitValue: '',
        DependCodes: [],
        IsCompDepend: false,
      };
      try {
        if (this.filterField.filter_classicConfig) {
          _config =
            typeof this.filterField.filter_classicConfig == 'string'
              ? JSON.parse(this.filterField.filter_classicConfig)
              : this.filterField.filter_classicConfig;
        }
      } catch (e) {}
      if (!!_config.InitValue) {
        _initValue = this.InitValueScript(
          _config.InitValue,
          _.cloneDeep(this.filterField),
          null,
        );
      }
      if(_config&&_config.enablePlaceholder&&_config.placeholderContext){
        let placeholderContext={}
        try {
          placeholderContext = JSON.parse(_config.placeholderContext);
        } catch (error) {
          
        }
        for(let i in placeholderContext){
          this.Filter[i]=placeholderContext[i]
        }
       
      }
      switch (_.toLower(field.dataType)) {
        case 'string':
          this.Filter.Condition = !!field.field_condition
            ? field.field_condition
            : 'contains';
          this.Filter.Value = !!_initValue.Name
            ? _initValue.Name
            : `<${Terms.field.inputValue}>`;
          break;
        case 'boolean':
          this.Filter.Condition = !!field.field_condition
            ? field.field_condition
            : '=';
          this.Filter.Value = !!_initValue.Name
            ? _initValue.Name
            : `<${Terms.field.inputValue}>`;
          break;
        case 'int':
        case 'decimal':
        case 'date':
        case 'dateTime':
        case 'timestamp':
          this.Filter.Condition = !!field.field_condition
            ? field.field_condition
            : '=';
          this.Filter.Value = !!_initValue.Name
            ? _initValue.Name
            : this.Mappings[field.dataType] == 'number'
              ? `<${Terms.field.inputValue}>`
              : `<${Terms.field.inputValue}>`;
        default:
          this.Filter.Condition = !!field.field_condition
            ? field.field_condition
            : '=';
          this.Filter.Value = !!_initValue.Name
            ? _initValue.Name
            : this.Mappings[field.dataType] == 'number'
              ? `<${Terms.field.inputValue}>`
              : `<${Terms.field.inputValue}>`;
          break;
      }
      this.Filter.ValueName = !!_initValue.Value
        ? _initValue.Value
        : this.Filter.Value;

      //变更筛选条件，条件值
      this.filterChangeTimer(this.Filter, true);
    },
    //变更筛选条件，条件值
    filterChangeTimer(filter, isChangeValue) {
      //变更筛选条件，条件值
      window['filter_change_timer'] = setTimeout(() => {
        let _dom = document.getElementById('filterValue_' + this.Filter.ID);
        if (!_dom) {
          return;
        }

        if (!!isChangeValue) {
          this.$refs['filterValue'].filterValue = this.Filter.Value;
        }

        _dom.setSelectionRange(0, 0);
        _dom.setSelectionRange(0, _dom.value.length);
        _dom.focus();
        _dom.click();
      }, 300);
    },
    getParentInfo(list, parent, info) {
      list.forEach((item, index) => {
        this.getParentInfo(item.Children, item, info);
        if (item.ID == this.Filter.ID) {
          this.tempInfo['parent'] = parent;
          this.tempInfo['index'] = index;
          return;
        }
      });
    },
    recoverFilter() {
      // this.Filter.DataType = this.currFilter.DataType;
      // this.Filter.Code = this.currFilter.Code;
      // this.Filter.Name = this.currFilter.Name;
      // this.Filter.Condition = this.currFilter.Condition;
      // this.Filter.Value = this.currFilter.Value;

      this.filterName = this.currFilter.Name;

      this.selectFlag = true;
    },
    filterNameClick(e) {
      if (!!this.FilterIsClassic) {
        return false;
      }

      let _input = e.target;
      this.searchText = '';
      this.selectEnter = false;

      //选择模式，文本全选
      if (this.selectFlag) {
        _input.setSelectionRange(0, 0);
        _input.setSelectionRange(0, _input.value.length);
      }

      //输入框值跟筛选字段值相同，显示所有字段
      if (_input.value == this.Filter.Name) {
        this.filterFields.forEach(item => {
          item['isActive'] = true;
        });
      }
      if (!this.visibleFilterNameMenu) {
        this.visibleFilterNameMenu = true;

        setTimeout(() => this.$refs['fieldSearchInput'].focus(), 100);
      }
      // console.log('========filterNameClick', this.Filter);
      //字段下拉激活显示
      // clearTimeout(this.timeoutActiveName);
      // this.timeoutActiveName = setTimeout(() => {
      //   // this.$refs['filterNameDropDown'].visible = true;
      //   if (!this.visibleFilterNameMenu) {
      //     this.visibleFilterNameMenu = true;
      //   }
      //   // this.$refs['filterNameDropDown'].removeTabindex();
      //   // this.$refs['filterNameDropDown'].initDomOperation();
      //   // this.$refs['filterNameDropDown'].show();
      //   // debugger;
      //   // this.$refs['FieldsScroll'].scrollToElement(document.getElementById("field_effec5bb-8718-4cf0-bd9a-80aa48376f61"));
      // }, 100);
    },
    filterNameKeyDown(e) {
      if (e.keyCode == 13) {
        if (this.activeItemList.length > 0) {
          this.filterNameCommand(this.activeItemList[0]);
          this.selectEnter = true;
        }
      } else if ([38, 40].indexOf(e.keyCode) > -1) {
        // up/down
        if (this.activeItemList.length == 0) {
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      }
    },
    filterNameBlur(e) {
      let _input = e.target;
      this.searchText = '';

      clearTimeout(this.timeoutBlurName);
      this.timeoutBlurName = setTimeout(() => {
        if (
          this.visibleFilterNameMenu == false &&
          (_.trim(_input.value) == '' || _input.value != this.Filter.Name)
        ) {
          this.recoverFilter();
        }
      }, 200);
    },
    searchTextBlur(e) {
      clearTimeout(this.timeoutBlurName);
      this.timeoutBlurName = setTimeout(() => {
        if (
          this.visibleFilterNameMenu == false &&
          (_.trim(this.filterName) == '' || this.filterName != this.Filter.Name)
        ) {
          this.recoverFilter();
        }
      }, 200);
    },
    mouseOver(e) {
      if (this.isMobile) {
        return true;
      }

      Array.from(document.getElementsByClassName('adj-oper-panel')).forEach(
        item => (item.style.display = 'none'),
      );
      var tempObj = document.getElementById(this.operID);
      if (!!tempObj) {
        tempObj.style.display = 'block';
        tempObj = document.getElementById(this.keyID);
        tempObj.setAttribute(
          'class',
          tempObj.getAttribute('class')
            ? tempObj.getAttribute('class').concat(' adj-oper-item-active')
            : 'adj-oper-item-active',
        );

        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
    mouseOut(e) {
      if (this.isMobile) {
        return true;
      }

      var tempObj = document.getElementById(this.operID);
      if (!!tempObj) {
        tempObj.style.display = 'none';
        tempObj = document.getElementById(this.keyID);
        tempObj.setAttribute(
          'class',
          tempObj.getAttribute('class').replace('adj-oper-item-active', ''),
        );

        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
    fasterRelationClick(e) {
      this.relationCommand(this.Filter.Relation == 'and' ? 'or' : 'and');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterSwitchClick(e) {
      this.relationCommand('off');

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    fasterDeleteClick(e) {
      this.relationCommand('del');
      this.$parent.deleteGroupIfChildrenIsNone &&
        this.$parent.deleteGroupIfChildrenIsNone();

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    DealDependFilter() {
      //复杂模式不处理依赖关系
      if (!this.FilterIsEasy) {
        return;
      }

      //条件依赖处理
      this.Groups.forEach(_filter => {
        let _field = this.Fields.filter(
          item =>
            item.tableAlias +
              '.' +
              (item.tableAlias != '__UserDefineColumns'
                ? item.fieldCode
                : item.fieldAlias) ==
            _filter.Code,
        );
        _field = _field[0] || {};

        if (!_field.ID) {
          return false;
        }

        let _config = {
          ColNum: 6,
          IsCommUse: true,
          InitValue: '',
          DependCodes: [],
          IsCompDepend: false,
        };
        try {
          if (_field.filter_classicConfig) {
            _config =
              typeof _field.filter_classicConfig == 'string'
                ? JSON.parse(_field.filter_classicConfig)
                : _field.filter_classicConfig;
          }
        } catch (e) {}

        if (
          !_config.DependCodes ||
          _config.DependCodes.length == 0 ||
          !_config.IsCompDepend
        ) {
          return false;
        }

        //该条件项依赖于当前条件项，该条件项值清空
        if (_config.DependCodes.includes(this.Filter.Code)) {
          if (this.FilterIsClassic) {
            _filter.Value = '';
            _filter.ValueName = '';
          } else {
            _filter.Value = `<${this.Term.field.inputValue}>`;
            _filter.ValueName = `<${this.Term.field.inputValue}>`;
          }
        }
      });
    },
    CheckDependFilter() {
      //复杂模式不处理依赖关系
      if (!this.FilterIsEasy) {
        return true;
      }

      let _config = {
        ColNum: 6,
        IsCommUse: true,
        InitValue: '',
        DependCodes: [],
        IsCompDepend: false,
      };
      try {
        if (this.filterField.filter_classicConfig) {
          _config =
            typeof this.filterField.filter_classicConfig == 'string'
              ? JSON.parse(this.filterField.filter_classicConfig)
              : this.filterField.filter_classicConfig;
        }
      } catch (e) {}

      if (
        !_config.DependCodes ||
        _config.DependCodes.length == 0 ||
        !_config.IsCompDepend
      ) {
        return true;
      }

      let _dependCode = '';
      try {
        _config.DependCodes.forEach(_pend => {
          let _pender = this.Groups.filter(item => item.Code == _pend);
          _pender = _pender[0] || {};

          //强依赖的条件为空，清空条件
          if (
            !_pender.ID ||
            _pender.Value == '' ||
            _pender.ValueName == '' ||
            _pender.Value == `<${this.Term.field.inputValue}>` ||
            _pender.ValueName == `<${this.Term.field.inputValue}>`
          ) {
            _dependCode = _pend;
            throw new Error('');
          }
        });
      } catch (e) {}

      if (_dependCode != '') {
        let _field = this.Fields.filter(
          item =>
            item.tableAlias +
              '.' +
              (item.tableAlias != '__UserDefineColumns'
                ? item.fieldCode
                : item.fieldAlias) ==
            _dependCode,
        );
        _field = _field[0] || {};

        if (!_field.ID) {
          return true;
        } else {
          // Funcs.Notify(
          //   this.Term.Notify.warningTitle,
          //   `“${_field.fieldName}”  ${this.Term.Notify.warningText_ismust}`,
          //   'warning',
          // );
          this.notify({
            caption: Terms.Notify.warningTitle,
            type: 'warning',
            message: `“${_field.fieldName}”  ${this.Term.Notify.warningText_ismust}`,
          });
          return false;
        }
      }

      return true;
    },
    filterLayoutDown(e) {
      e = e ? e : window.event;
      if (this.filterLayoutX == null) {
        this.filterLayoutX = e.screenX;
      }

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    filterLayoutUp(e) {
      e = e ? e : window.event;
      this.filterLayoutX = null;

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
    filterLayoutMove(e) {
      e = e ? e : window.event;
      if (this.filterLayoutX != null) {
        if (e.screenX > this.filterLayoutX) {
          this.filterLayoutX = null;

          clearTimeout(this.timeoutLayoutChange);
          this.timeoutLayoutChange = setTimeout(() => {
            this.Group.ColNum = this.Group.ColNum + 1;
          }, 500);
        } else if (e.screenX < this.filterLayoutX) {
          this.filterLayoutX = null;

          clearTimeout(this.timeoutLayoutChange);
          this.timeoutLayoutChange = setTimeout(() => {
            this.Group.ColNum = this.Group.ColNum - 1;
          }, 500);
        }
      }

      e.stopPropagation();
      e.preventDefault();
      return false;
    },
  },

  expose: ['DealDependFilter', 'CheckDependFilter'],
};
</script>

<style lang="scss">
.f-toe {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.menu-item-cheked {
  background-color: #f0f2f5;
}

.svg-icon {
  height: 14px;
  vertical-align: middle;
  overflow: hidden;
  fill: currentColor;
}

.filter-name-box-classic[data-is-must='true']::before {
  content: '*';
  color: red;
  position: absolute;
  top: 3px;
  left: 1px;
}

.filter-name-input-classic[data-is-must='true'] {
  padding-left: 10px;
}

.filter-name-item-panel {
  max-height: 400px;
  overflow: auto;
}

.filter-name-text-panel {
  position: relative;
  padding: 3px 8px;

  .filter-name-text {
    width: calc(100% - 30px);
    min-width: 126px;
    margin: 0 16px;
    height: 27px;
    line-height: 27px;
    border: none;
    outline: none;
  }

  .filter-name-search-panel {
    position: absolute;
    left: 8px;
    top: 7px;
    color: #bbb;
  }
}

.filter-name-empty-panel {
  height: 27px;
  line-height: 27px;
  color: #888;
  font-size: 14px;
}

.filter-name-empty {
  padding-left: 16px;
}

.filter-item-oper-delete {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-weight: bold;
  color: var(--color-text-alpha-4);
  i {
    vertical-align: top;
    position: relative;
    top: 5px;
  }

  &:hover,
  &:focus {
    outline: none;
    color: var(--color-text-alpha-1);
  }
}

.filter-item-oper-resize {
  position: absolute;
  right: 0px;
  display: inline-block;
  height: 30px;
  border: none;
  vertical-align: middle;
  cursor: col-resize;
  width: 12px;
}

.tr-filter-item {
  [disabled],
  [disabled] * {
    opacity: 1 !important;
    outline: 0 !important;
    cursor: default !important;
  }
}
</style>
